<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-page-header
            class="title-row"
            @back="goLine"
            content="参数详情"
          ></el-page-header>
          <el-radio-group
            v-model="typeRadio"
            @change="typeCheck"
            style="margin-left:40%"
          >
            <el-radio-button label="非默认值"></el-radio-button>
            <el-radio-button label="全部"></el-radio-button>
          </el-radio-group>
          <div style="float:right">采集时间：{{ paramData.createTime }}</div>
          <br />
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            v-for="(item, index) in tabsList"
            :label="item"
            :name="item"
          >
            <el-row>
              <el-col :span="6">
                <el-tree
                  :data="treeData"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                  default-expand-all
                  node-key="id"
                  highlight-current
                ></el-tree>
              </el-col>
              <el-col :span="18">
                <el-pagination
                  align="center"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 40, 50, 100]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="typeData.length"
                  v-if="typeData.length > 0"
                >
                </el-pagination>
                <el-form
                  :inline="true"
                  label-width="300px"
                  v-for="(item, index) in typeData.slice(
                    (currentPage - 1) * pageSize,
                    currentPage * pageSize
                  )"
                  disabled
                >
                  <el-form-item :label="item.displayName" style="width:100%">
                    <div style="display:flex;justify-content:space-between">
                      <div>
                        <el-radio-group
                          v-model="detailData[index][0].defaultValue"
                          style="display:flex;flex-direction:column"
                          v-if="item.type == 'RADIO'"
                        >
                          <el-radio
                            v-for="item in detailData[index][0].validValues"
                            :label="item.value"
                            >{{ item.label }}</el-radio
                          >
                        </el-radio-group>
                        <div style="display:flex;flex-direction:column">
                          <el-checkbox
                            v-for="val in detailData[index]"
                            :label="val.contextName"
                            v-model="val.defaultValue"
                            v-if="item.type == 'CHECKBOX'"
                          ></el-checkbox>
                        </div>
                        <el-input
                          v-model="detailData[index][0].defaultValue"
                          v-if="item.type == 'TEXT'"
                        ></el-input>
                        <el-input
                          v-model="detailData[index][0].defaultValue"
                          type="textarea"
                          v-if="item.type == 'TEXTAREA'"
                          style="width:200px"
                        ></el-input>
                        <div v-if="item.type == 'DUAL_THRESHOLD'">
                          <div v-for="(res, num) in detailData[index]">
                            {{ res.contextName }}
                            <br />
                            严重：<el-input
                              v-model="JSON.parse(res.defaultValue).critical"
                            />
                            <br />
                            警告：<el-input
                              v-model="JSON.parse(res.defaultValue).warning"
                            />
                          </div>
                        </div>
                        <div v-if="item.type == 'LOG_EVENT_WHITELIST'">
                          <div v-for="tag in detailData[index]">
                            {{ tag.contextName }}
                            <br />
                            <el-form-item label="比率" label-width="80px">
                              <el-input
                                style="width:400px"
                                v-model="
                                  JSON.parse(tag.defaultValue).rules[0].rate
                                "
                              ></el-input>
                            </el-form-item>
                            <br />
                            <el-form-item label="周期" label-width="80px">
                              <el-input
                                style="width:400px"
                                v-model="
                                  JSON.parse(tag.defaultValue).rules[0]
                                    .periodminutes
                                "
                              ></el-input
                              >分钟
                            </el-form-item>
                            <br />
                            <el-form-item label="阈值" label-width="80px">
                              <el-input
                                style="width:400px"
                                v-model="
                                  JSON.parse(tag.defaultValue).rules[0]
                                    .threshold
                                "
                              ></el-input>
                            </el-form-item>
                            <br />
                            <el-form-item label="内容" label-width="80px">
                              <el-input
                                style="width:400px"
                                type="textarea"
                                v-model="
                                  JSON.parse(tag.defaultValue).rules[0].content
                                "
                              ></el-input>
                            </el-form-item>
                            <br />
                            <el-form-item label="异常类型">
                              <el-input
                                style="width:400px"
                                v-model="
                                  JSON.parse(tag.defaultValue).rules[0]
                                    .exceptiontype
                                "
                              ></el-input>
                            </el-form-item>
                          </div>
                        </div>
                      </div>
                      <div>
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="item.description"
                          placement="bottom"
                        >
                          <i
                            style="margin-left: 3%;font-size:16px"
                            class="el-icon-question"
                          ></i>
                        </el-tooltip>
                      </div>
                    </div>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-empty
            description="暂无数据"
            v-if="tabsList.length == '0'"
          ></el-empty>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>
<script>
import parameter from "@/api/phaseTwo/parameter.js";
export default {
  props: ["paramData"],
  data() {
    return {
      data: [
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      dataList: [],
      tabsList: ["非默认值"],
      activeName: "非默认值",
      treeData: [],
      typeData: [],
      detailData: [],
      currentPage: 1, // 当前页码
      total: null, // 总条数
      pageSize: 10, // 每页的数据条数
      typeRadio: "非默认值",
    };
  },
  created() {
    this.param();
  },
  methods: {
    goLine() {
      this.$emit("changeSee", "0");
    },
    handleNodeClick(data) {
      this.typeData = [];
      this.detailData = [];
      data.sj_data.forEach(item => {
        if (item.type != "LIST" && item.type != "HADOOP_SAFETY_VALVE") {
          this.typeData.push(item);
          this.detailData.push(JSON.parse(item.paramSpecValues));
        }
      });
    },
    addList() {
      this.assList.push({ value: "" });
    },
    subList(index) {
      this.assList.splice(index, 1);
    },
    addLists() {
      this.urlList.push({ value: "" });
    },
    subLists(index) {
      this.urlList.splice(index, 1);
    },
    param() {
      parameter
        .param(
          this.paramData.cmFlag,
          this.paramData.clusterFlag,
          this.paramData.createTime,
          "1"
        )
        .then(res => {
          res.forEach(item => {
            if (item.label == "scope") {
              item.label = "范围";
            } else if (item.label == "category") {
              item.label = "类别";
            } else if (item.label == "status") {
              item.label = "状态";
            }
          });
          this.treeData = res;
        });
    },
    getService() {
      this.tabsList = [];
      parameter
        .getService(
          this.paramData.cmFlag,
          this.paramData.clusterFlag,
          this.paramData.createTime
        )
        .then(res => {
          res.forEach(item => {
            this.tabsList.push(item.service_type);
          });
          this.activeName = this.tabsList[0];
          parameter
            .param(
              this.paramData.cmFlag,
              this.paramData.clusterFlag,
              this.paramData.createTime,
              "",
              this.activeName
            )
            .then(res => {
              res.forEach(item => {
                if (item.label == "scope") {
                  item.label = "范围";
                } else if (item.label == "category") {
                  item.label = "类别";
                } else if (item.label == "status") {
                  item.label = "状态";
                }
              });
              this.treeData = res;
            });
        });
    },
    handleClick(data) {
      this.nowLabel = data.label;
      if (data.label != "非默认值") {
        parameter
          .param(
            this.paramData.cmFlag,
            this.paramData.clusterFlag,
            this.paramData.createTime,
            "",
            data.label
          )
          .then(res => {
            res.forEach(item => {
              if (item.label == "scope") {
                item.label = "范围";
              } else if (item.label == "category") {
                item.label = "类别";
              } else if (item.label == "status") {
                item.label = "状态";
              }
            });
            this.treeData = res;
          });
      } else if (data.label == "非默认值") {
        this.param();
      }
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    typeCheck() {
      if (this.typeRadio == "非默认值") {
        this.tabsList = ["非默认值"];
        this.activeName = "非默认值";
        this.param();
      } else if (this.typeRadio == "全部") {
        this.getService();
      }
    },
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-form-item__content {
  width: 650px;
}
::v-deep .btn-prev .el-icon {
  display: none;
}
::v-deep .btn-next .el-icon {
  display: none;
}
</style>
